<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div id="box">
    <span>{{text}}</span>
    <hr>
    <span>{{num}}</span>
    <button @click="num++">+1</button>
    <ul>
      <li v-for="item in arr">{{item}}</li>
    </ul>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.min.js"> </script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.js"></script>
  <script>

    new Vue({
      el: '#box',
      data: {
        text: 'hello Vue',
        num: 1,
        arr: []
      },

      //1.beforeCreates 在组件实例被创建之初，组件数据对象 data 和 methods 都还没初始化，这是最早的钩子函数。
      beforeCreate () {
        console.log(this.text, 'beforeCreate数据加载之前');
      },
      //2.created 在组件实例创建完成后，此时已经完成了数据的观测，可以执行数据初始化等操作。
      created () {
        //发送请求可以在created中进行
        axios({
          url: 'http://hmajax.itheima.net/api/province'
        }).then(res => {
          this.arr = res.data.list
        })
        console.log(this.text, 'created数据加载之后');
      },
      //3.beforeMount 在挂载开始之前被调用，此时模板编译已经完成，但仍未将模板渲染成 DOM 结构。
      beforeMount () {
        let span = document.querySelector('span')
        console.log(span, 'beforeMount模板编译已经完成,未将模板渲染成dom结构');
      },
      //4.在挂载元素时调用，此时模板已经渲染成了 HTML DOM，该钩子函数常用于获取第三方 DOM 或初始化页面数据等操作。
      mounted () {
        //操作dom元素会在mounted进行
        let span = document.querySelector('span')
        console.log(span, 'mounted模板渲染完成');
      },
      //5.beforeUpdate：在更新之前被调用，此时组件还没有重新渲染，但是数据已经更新，所以可以在该函数内部对数据进行修改或操作。
      beforeUpdate () {
        console.log(this.num, 'beforeUpdate数据更新之前');
      },
      //6.updated 在更新之后被调用，此时组件已经重新渲染完毕，可以执行一些操作，如更新 DOM 数据、绑定事件、执行动画等。
      updated () {
        console.log(this.num, 'updated数据更新之后');
      }

    })




  </script>

</body>

</html>